import React from 'react';
import BaseScreen from './BaseScreen';
import {MainTab} from "../const/imgs";
import Config from "../Config";
import {locationReplace} from "../utils/LocationUtil";
import * as locations from "../const/locations";

const Datas = [
    {
        images: {focus: MainTab.HomeFocus, normal: MainTab.Home},
        name: '首页',
        flag: 'home'
    },
     {
        images: {focus: MainTab.AttendanceFocus, normal: MainTab.Attendance},
        name: '考勤',
        flag: 'attendance'
    },
     {
        images: {focus: MainTab.RankingFocus, normal: MainTab.Ranking},
        name: '排名',
        flag: 'rank'
    },
     {
        images: {focus: MainTab.MeFocus, normal: MainTab.Me},
        name: '我的',
        flag: 'me'
    },
];

const TabItem = ({imgs, text, style, focus, onClick}) => {
    return (
        <div style={{
            ...style,
            backgroundColor: 'white',
            textAlign: 'center',
            height: '100%',
            display: 'inline-block',
            padding: '0.2rem 0',
            width: '25%'
        }}
             onClick={onClick}>
            <img src={focus ? imgs.focus : imgs.normal} style={{height: '1.6rem', verticalAlign: 'middle'}}/>
            <p style={{color: focus ?  Config.BaseColor:'#b9b9b9', marginTop: '0.1rem'}}>{text}</p>
        </div>
    );
};

/**
 * 主页
 */

class MainScreen extends BaseScreen {
    constructor(props) {
        super(props);
        this.state = {
            ...this.getDefaultState(),
            selected: 'home',
            tabs: Datas,
        };
    }

    componentWillMount() {
        this.setPathTab();
    }

    MainRoute = {
        home: locations.MAIN,
        attendance: locations.ATTENDANCE,
        rank:locations.RANKING,
        me: locations.ME
    };

    setPathTab() {
        let path = window.location.pathname.slice(6);
        if (path === '') {
            this.setState({
                selected: 'home'
            })
        } else {
            this.setState({
                selected: path
            })
        }
    }

    handleTabClick = (selected) => {
        locationReplace(this.MainRoute[selected]);
        this.setPathTab();
    };

    render() {
        return (
            <div>
                {this.props.children}
                {this.renderTab()}
            </div>
        );
    }

    renderTab() {
        const {selected, tabs} = this.state;
        return (
            <nav style={style}>
                {tabs.map((data, index) => {
                    return (
                        <TabItem
                            key={index}
                            text={data.name} imgs={data.images}
                            style={{width: data.width}}
                            focus={selected === data.flag}
                            onClick={() => this.handleTabClick(data.flag)}
                        />
                    );
                })}
            </nav>
        );
    }
}

let style = {
    position: 'fixed',
    left: 0,
    bottom: 0,
    right: 0,
    height: '3.5rem'
};

export default MainScreen;